<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端路由机制实现</title>
</head>

<body>
    <nav class="nav-box">
        <a href="#/">首页</a>
        <a href="#/product">产品中心</a>
        <a href="#/personal">个人中心</a>
    </nav>
    <div class="view-box"></div>

    <!-- IMPORT JS -->
    <script>
        const viewBox = document.querySelector('.view-box')

        // 构建路由表「什么哈希值，匹配什么组件/内容」
        const routes = [{
            path: '/',
            component: '首页的内容'
        }, {
            path: '/product',
            component: '产品中心的内容'
        }, {
            path: '/personal',
            component: '个人中心的内容'
        }, {
            path: '*',
            component: '404错误页面'
        }]

        // 监听哈希值的变化，根据最新的哈希值，和路由表进行匹配，把匹配的内容放在 viewBox 容器中渲染
        const matchRoute = function matchRoute() {
            let hash = location.hash.substring(1)
            let item = routes.find(item => item.path === hash)
            if (!item) {
                // 没有找到匹配项，再去找path='*'的
                item = routes.find(item => item.path === '*')
            }
            if (!item) {
                // 正常的没找到，*的也没找到
                viewBox.innerHTML = ''
                return
            }
            // 如果找到了，则把匹配的内容进行渲染
            viewBox.innerHTML = item.component
        }
        window.addEventListener('hashchange', matchRoute)

        // 第一次进入页面，让页面的哈希值，默认是首页的值“#/”
        location.hash = '#/'
        matchRoute()
    </script>
</body>

</html>